<li class="grey"><a href="#" class="dropdown-toggle"
	data-toggle="dropdown"> <i class="icon-tasks"></i> <span class="badge">4</span>
</a>
	<ul
		class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-closer">
		<li class="nav-header"><i class="icon-ok"></i> 4 Tasks to complete</li>

		<li><a href="#">
				<div class="clearfix">
					<span class="pull-left">Software Update</span> <span
						class="pull-right">65%</span>
				</div>
				<div class="progress progress-mini">
					<div class="bar" style="width: 65%"></div>
				</div>
		</a></li>

		<li><a href="#">
				<div class="clearfix">
					<span class="pull-left">Hardware Upgrade</span> <span
						class="pull-right">35%</span>
				</div>
				<div class="progress progress-mini progress-danger">
					<div class="bar" style="width: 35%"></div>
				</div>
		</a></li>

		<li><a href="#">
				<div class="clearfix">
					<span class="pull-left">Unit Testing</span> <span
						class="pull-right">15%</span>
				</div>
				<div class="progress progress-mini progress-warning">
					<div class="bar" style="width: 15%"></div>
				</div>
		</a></li>

		<li><a href="#">
				<div class="clearfix">
					<span class="pull-left">Bug Fixes</span> <span class="pull-right">90%</span>
				</div>
				<div
					class="progress progress-mini progress-success progress-striped active">
					<div class="bar" style="width: 90%"></div>
				</div>
		</a></li>

		<li><a href="#"> See tasks with details <i class="icon-arrow-right"></i>
		</a></li>
	</ul></li>

<li class="purple"><a href="#" class="dropdown-toggle"
	data-toggle="dropdown"> <i
		class="icon-bell-alt icon-animated-bell icon-only"></i> <span
		class="badge badge-important">8</span>
</a>
	<ul
		class="pull-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-closer">
		<li class="nav-header"><i class="icon-warning-sign"></i> 8
			Notifications</li>

		<li><a href="#">
				<div class="clearfix">
					<span class="pull-left"> <i
						class="icon-comment btn btn-mini btn-pink"></i> New comments
					</span> <span class="pull-right badge badge-info">+12</span>
				</div>
		</a>
		</li>

		<li><a href="#"> <i class="icon-user btn btn-mini btn-primary"></i>
				Bob just signed up as an editor ...
		</a>
		</li>

		<li><a href="#">
				<div class="clearfix">
					<span class="pull-left"> <i
						class="icon-shopping-cart btn btn-mini btn-success"></i> New
						orders
					</span> <span class="pull-right badge badge-success">+8</span>
				</div>
		</a>
		</li>

		<li><a href="#">
				<div class="clearfix">
					<span class="pull-left"> <i
						class="icon-twitter btn btn-mini btn-info"></i> Followers
					</span> <span class="pull-right badge badge-info">+4</span>
				</div>
		</a>
		</li>

		<li><a href="#"> See all notifications <i class="icon-arrow-right"></i>
		</a>
		</li>
	</ul>
</li>

<li class="green"><a href="#" class="dropdown-toggle"
	data-toggle="dropdown"> <i
		class="icon-envelope-alt icon-animated-vertical icon-only"></i> <span
		class="badge badge-success">5</span>
</a>
	<ul
		class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-closer">
		<li class="nav-header"><i class="icon-envelope"></i> 5 Messages</li>

		<li><a href="#"> <img alt="Alex's Avatar" class="msg-photo"
				src="assets/avatars/avatar.png" /> <span class="msg-body"> <span
					class="msg-title"> <span class="blue">Alex:</span> Ciao sociis
						natoque penatibus et auctor ...
				</span> <span class="msg-time"> <i class="icon-time"></i> <span> a
							moment ago </span>
				</span>
			</span>
		</a>
		</li>

		<li><a href="#"> <img alt="Susan's Avatar" class="msg-photo"
				src="assets/avatars/avatar3.png" /> <span class="msg-body"> <span
					class="msg-title"> <span class="blue">Susan:</span> Vestibulum id
						ligula porta felis euismod ...
				</span> <span class="msg-time"> <i class="icon-time"></i> <span> 20
							minutes ago </span>
				</span>
			</span>
		</a>
		</li>

		<li><a href="#"> <img alt="Bob's Avatar" class="msg-photo"
				src="assets/avatars/avatar4.png" /> <span class="msg-body"> <span
					class="msg-title"> <span class="blue">Bob:</span> Nullam quis risus
						eget urna mollis ornare ...
				</span> <span class="msg-time"> <i class="icon-time"></i> <span>
							3:15 pm </span>
				</span>
			</span>
		</a>
		</li>

		<li><a href="#"> See all messages <i class="icon-arrow-right"></i>
		</a>
		</li>

	</ul>
</li>
